<template>
	<div class="imageContent">
		<div v-for="(item, index) in images" class="imageItem">
			<div class="imageItemContent">
				<img :src="item.local || item.remote" style="max-width: 100%;max-height: 100%;" />
				<LoadingOutlined class="loading" v-if="imagesLoading[index]" />
				<div style="position: absolute;right: 5px; top: 10px;z-index:10;font-size: 18px;">
					<EyeOutlined style="color:#333333;cursor: pointer;margin-right:10px"
						@click.stop="(visible = true) && (current = index)" />
					<DeleteOutlined v-if="!disabled" @click="handleDelete(item, index)" style="color:#333333;cursor: pointer" />
				</div>
			</div>
		</div>
		<div class="imageItem" v-if="images.length < limit">
			<minMultipleFile :index="images.length" :multiple="multiple" :accept="accept" :limit="limit" :maxSize="maxSize"
				@handleReadFile="handleReadFile"
				style="position: relative;display: flex;width: 100px;height: 100px;justify-content:center;align-items:center;background-color: rgba(0, 0, 0, 0.02);border-radius: 8px;border: 1px dashed #d9d9d9;">
				<div style="width: 100px;height: 100px;display: flex;align-items:center;justify-content:center">
					<LoadingOutlined v-if="imagesLoading[index]" />
					<PlusOutlined v-else />
				</div>
			</minMultipleFile>
		</div>
	</div>

	<a-image-preview-group v-if="previewMode == 'image' && visible"
		:preview="{ visible, onVisibleChange: () => visible = false, current }">
		<a-image v-for="(item) in images" :width="200" :style="{ display: 'none' }" :src="item.local || item.remote" />
	</a-image-preview-group>
	<a-modal v-if="previewMode == 'modal' && visible" :open="visible" title="预览" :footer="null"
		@cancel="() => visible = false">
		<img v-for="(item) in images" style="width: 100%" :src="item.local || item.remote" />
	</a-modal>
</template>

<script setup>
import minMultipleFile from '@/components/common/minMultipleFile.vue'
import { ref, defineProps, reactive, defineEmits, watch } from 'vue'
import { PlusOutlined, LoadingOutlined, DeleteOutlined, EyeOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'

const props = defineProps({
	modelValue: { type: [Array, String], default: '' },
	previewImage: { type: [Array, String], default: '' },
	customUploadImage: { type: null, default: null },
	disabled: { type: Boolean, default: false },
	uploadLoading: { type: Boolean, default: false },
	maxSize: { type: Number, default: 999 },
	limit: { type: Number, default: 1 },
	previewMode: { type: String, default: 'image' },
	accept: { type: String, default: 'image/*' },
	multiple: { type: Boolean, default: false },
})

const visible = ref(false)
const current = ref(0)
const v = { local: '', remote: '' }
const images = ref([])
const imagesLoading = ref([])


const init = () => {
	if (!props.modelValue.length) return
	images.value = []
	if (Array.isArray(props.modelValue)) {
		for (let [i, v] of props.modelValue.entries()) {
			images.value.push({ local: props.previewImage[i] || '', remote: v })
		}
	} else {
		for (let i of props.modelValue.split(',')) {
			images.value.push({ local: props.previewImage || '', remote: i })
		}
	}
	imagesLoading.value.length = images.value.length
}
init()
watch([() => props.modelValue], ([value]) => {
	init()
})
const emit = defineEmits(['handleReadFile', 'handleDelete', 'update:modelValue', 'update:previewImage'])
const updateData = () => {
	let val = images.value.map(val => val.remote)
	let preVal = images.value.map(val => val.local)
	emit('update:modelValue', val)
	emit('update:previewImage', preVal)
}
const handleReadFile = async e => {
	let { index, fileInfoList } = e
	if (e.message) return message.error(e.message)
	if (props.limit < (images.value.length + fileInfoList.length)) return message.error('最多上传' + props.limit + '张图片')
	emit('handleReadFile')
	if (!props.customUploadImage) return
	for (let [i, info] of fileInfoList.entries()) {
		let newIndex = index + i
		imagesLoading.value[newIndex] = true
		images.value[newIndex] = { local: '', remote: '' }
		let res = await props.customUploadImage({ file: info.file })
		imagesLoading.value[newIndex] = false
		if (!res) return (message.error('上传失败'), images.value.splice(newIndex, 1))
		images.value[newIndex] = { local: info.local, remote: res }
	}
	updateData()

}
const handleDelete = (item, index) => {
	emit('handleDelete')
	if (!props.customUploadImage) return
	images.value.splice(index, 1)
	let flag = images.value.filter(val => !val.local)
	updateData()
}

</script>

<style lang="scss" scoped>
.imageContent {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

.imageItem {
	position: relative;

	.imageItemContent {
		position: relative;
		display: flex;
		width: 100px;
		height: 100px;
		justify-content: center;
		align-items: center;
		background-color: rgba(0, 0, 0, 0.02);
		border-radius: 8px;
		border: 1px dashed #d9d9d9;
		overflow: hidden;
		.loading {
			width: 30px;
			height: 30px;
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			top: 0;
			margin: auto;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 20px;
		}
	}

	/* margin-right: 10px;
	&:last-child {
		margin-right: 0;
	} */
}
</style>